<template>
	<view class="bg">
		
		<view class="task_bg">
			<!-- <view class="sub_title_vice">类型</view> -->
			<view class="task_one">
				<u-search placeholder="请输入关键词" v-model="keyword" @change='searchList' :show-action='false'></u-search>
			</view>
			<view class="task_one">
				<view class="type_flex">
					<view v-for="(item, index) in typeArr" :key="index"
						:class="item.type === typeIndex ? 'type_one' : 'type_two'"
						@click="changeTypeIndex(index,item.type)">
						<view>{{ item.name }}</view>
					</view>
				</view>
			</view>
			

			<view>
				<view class="task_one" v-for="(item, index) in dcrwArr" :key="index" @tap="openDetail(item,4)">
					<view class="task_head">
						<view class="headFont">{{ item.itemCode_dictText }}</view>
						<view class="task_type2">督查任务</view>
					</view>
					<view class="task_line">
						<view class="line_left">节点名称</view>
						<view class="line_right">{{ item.subProcessDetailCode_dictText }}</view>
					</view>
					<view class="task_line">
						<view class="line_left">起止时间</view>
						<view class="line_right">{{ item.planBeginDate }}~{{ item.planEndDate }}</view>
					</view>
				</view>
				<u-loadmore :status="dcrwstatus" :icon-type="iconType" :load-text="loadText"></u-loadmore>
			</view>

			
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>
<script>
	import {
		zdcqList,
		xmjzList,
		tqxtList,
		xmlcList,
		htsqList,
		dcrwList,
		xxdbcList,
		xzZdcqList
	} from '@/request/zdxm.js'
	export default {
		data() {
			return {
				keyword: '',
				scrollTop: 0,
				role: uni.getStorageSync('role'),
				zdcqArr: [],
				zdcqNowPage: 1,
				zdcqstatus: 'loadmore',

				xmjzArr: [],
				xmjzNowPage: 1,
				xmjzstatus: 'loadmore',

				tqxtArr: [],
				tqxtNowPage: 1,
				tqxtstatus: 'loadmore',

				xmlcArr: [],
				xmlcNowPage: 1,
				xmlcstatus: 'loadmore',

				htsqArr: [],
				htsqNowPage: 1,
				htsqstatus: 'loadmore',

				dcrwArr: [],
				dcrwNowPage: 1,
				dcrwstatus: 'loadmore',

				xxdbcArr: [],
				xxdbcNowPage: 1,
				xxdbcstatus: 'loadmore',

				typeIndex: 1,
				typeArr: [
					// "全部",
					{
						name: "征地拆迁",
						type: 1
					},
					{
						name: "项目进展",
						type: 2
					},
					{
						name: "提请协调",
						type: 3
					},
					{
						name: "督查任务",
						type: 4
					},
					{
						name: "回退申请",
						type: 5
					},
					{
						name: "项目流程",
						type: 6
					},
					{
						name: "流程选择",
						type: 7
					},
					{
						name: "信息待补充",
						type: 8
					},
				],
				list: [{
						name: "待处理",
					},
					{
						name: "已处理",
					},
				],
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				current: 0, // tabs组件的current值，表示当前活动的tab选项
			};
		},
		onLoad() {
			if (this.role === '1') {
				this.typeArr = [{
						name: "全部",
						type: 1
					},
					{
						name: "未完成",
						type: 2
					},
					{
						name: "已完成",
						type: 3
					},
					{
						name: "项目进展",
						type: 4
					},
					{
						name: "征地拆迁进展",
						type: 5
					}
				]
			} else if (this.role === '5') {
				this.typeArr = [
					{
						name: "全部",
						type: 1
					}, {
						name: "进展督查",
						type: 6
					},
				]
			}
			this.dcrwList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			// if (this.typeIndex === 1) {
			// 	this.zdcqstatus = 'loading';
			// 	this.zdcqNowPage++
			// 	this.zdcqList()
			// } else if (this.typeIndex === 2) {
			// 	this.xmjzstatus = 'loading';
			// 	this.xmjzNowPage++
			// 	this.xmjzList()
			// } else if (this.typeIndex === 3) {
			// 	this.tqxdstatus = 'loading';
			// 	this.tqxdNowPage++
			// 	this.tqxdList()
			// } else if (this.typeIndex === 4) {
			this.dcrwstatus = 'loading';
			this.dcrwNowPage++
			this.dcrwList()
			// } else if (this.typeIndex === 5) {
			// 	this.htsqstatus = 'loading';
			// 	this.htsqNowPage++
			// 	this.htsqList()
			// }
		},
		methods: {
			searchList(){
				this.dcrwArr = []
				this.dcrwNowPage = 1
				this.dcrwList()
			},
			xxdbcList() {
				xxdbcList({
					flag: '1',
					pageNo: this.xxdbcNowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.xxdbcArr = [...this.xxdbcArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.xxdbcstatus = 'nomore'
					}
					// console.log('信息待补充',this.xxdbcArr)
				})
			},
			zdcqList() {
				if (this.role === '1') {
					zdcqList({
						pageNo: this.zdcqNowPage,
						pageSize: '10',
						column: 'createTime',
						order: 'desc'
					}).then((res) => {
						this.zdcqArr = [...this.zdcqArr, ...res.data.result.records]
						if (res.data.result.records.length < 10) {
							this.zdcqstatus = 'nomore'
						}
						// console.log('征地拆迁',this.zdcqArr)
					})
				} else if (this.role === '4') {
					xzZdcqList({
						pageNo: this.zdcqNowPage,
						pageSize: '10',
						column: 'createTime',
						order: 'desc'
					}).then((res) => {
						this.zdcqArr = [...this.zdcqArr, ...res.data.result.records]
						if (res.data.result.records.length < 10) {
							this.zdcqstatus = 'nomore'
						}
						// console.log('征地拆迁',this.zdcqArr)
					})
				}
			},
			xmjzList() {
				xmjzList({
					pageNo: this.xmjzNowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.xmjzArr = [...this.xmjzArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.xmjzstatus = 'nomore'
					}
					// console.log('项目进展',this.zdcqArr)
				})
			},
			tqxtList() {
				tqxtList({
					pageNo: this.tqxtNowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.tqxtArr = [...this.tqxtArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.tqxtstatus = 'nomore'
					}
					// console.log('提请协调',this.tqxtArr)
				})
			},
			xmlcList() {
				xmlcList({
					pageNo: this.xmlcNowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.xmlcArr = [...this.xmlcArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.xmlcstatus = 'nomore'
					}
					// console.log('项目流程',this.xmlcArr)
				})
			},
			htsqList() {
				htsqList({
					pageNo: this.htsqNowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.htsqArr = [...this.htsqArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.htsqstatus = 'nomore'
					}
					console.log(this.htsqArr)
					// console.log('回退申请',this.htsqArr)
				})
			},
			dcrwList() {
				var taskStatus = ''
				if (this.typeIndex !== 1) {
					if (this.typeIndex === 3) {
						taskStatus = '2'
					} else {
						taskStatus = '1'
					}
				}
				dcrwList({
					searchWord: this.keyword,
					taskType: this.typeIndex < 4 ? '1' : '2',
					taskStatus: taskStatus,
					pageNo: this.dcrwNowPage,
					pageSize: '10',
					column: 'createTime',
					order: 'desc'
				}).then((res) => {
					this.dcrwArr = [...this.dcrwArr, ...res.data.result.records]
					if (res.data.result.records.length < 10) {
						this.dcrwstatus = 'nomore'
					}
					// console.log('督查任务',this.dcrwArr)
				})
			},
			tabsChange(index) {
				this.current = index;
			},
			changeTypeIndex(index, type) {
				this.dcrwArr = []
				this.dcrwNowPage = 1
				this.typeIndex = type;
				// if (type === 1) {
				// 	this.zdcqList()
				// } else if (type === 2) {
				// 	this.xmjzList()
				// } else if (type === 3) {
				// 	this.tqxtList()
				// } else if (type === 4) {
				this.dcrwList()
				// } else if (type === 5) {
				// 	this.htsqList()
				// } else if (type === 6) {
				// 	this.xmlcList()
				// } else if (type === 8) {
				// 	this.xxdbcList()
				// }
			},
			openDetail(x, type) {
				uni.navigateTo({
					url: '../details/index?item=' + JSON.stringify(x) + '&type=' + type
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.top_search {
		width: 100vw;
		height: 120rpx;
		display: flex;
		align-items: center;
		// padding: 0 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;

		.search_screening {
			margin-left: 2%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			.font {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
			}
		}
	}

	.task_bg {
		// margin-top: 120rpx;

		.task_one {
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx;
			position: relative;
			margin-bottom: 40rpx;
			box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
			border-radius: 24rpx 8rpx 8rpx 8rpx;
		}

		.task_head {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.headFont {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272b32;
			}

			.task_type1 {
				min-width: 150rpx;
				margin-left: 10rpx;
				text-align: center;
				background: rgba(250, 173, 51, 0.1);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #faad33;
				padding: 8rpx 16rpx;
			}

			.task_type2 {
				min-width: 150rpx;
				text-align: center;
				margin-left: 10rpx;
				background: rgba(48, 116, 255, 0.1);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(48, 116, 255, 1);
				padding: 8rpx 16rpx;
			}

			.task_type3 {
				min-width: 150rpx;
				text-align: center;
				margin-left: 10rpx;
				background: rgba(31, 211, 183, 0.1);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(31, 211, 183, 1);
				padding: 8rpx 16rpx;
			}
		}

		.task_line {
			display: flex;
			align-items: center;
			margin-bottom: 35rpx;

			.line_left {
				min-width: 20%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}

			.line_left32 {
				min-width: 32%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}

			.line_right {
				max-width: 80%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
			}
		}

		.type_flex {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			.type_one {
				width: 30%;
				margin: 0 1.5%;
				height: 60rpx;
				background: #3074ff;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				margin-bottom: 30rpx;
			}

			.type_two {
				background: #ffffff;
				border: 1rpx solid #e7e9f0;
				border-radius: 30rpx;
				width: 30%;
				margin: 0 1.5%;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(142, 156, 179, 1);
				margin-bottom: 30rpx;
			}
		}
	}
</style>
